<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖放-drag-drop</title>
    <style>
        .box{
            width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;
        }

        .item{
            width:98px; height:30px;padding:10px;border:1px solid #aaaaaa;

        }
    </style>
</head>
<body>

<p>请把 W3School 的图片拖放到矩形中</p>
<div id="box" class="box" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<div id="box2" class="box" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<div id="item1" class="item" draggable="true" ondragstart="drag(event)"/>1</div>
<img id="img1" src="source/w3c.gif" draggable="true" ondragstart="drag(event)"/>
<div>
    <button id="btnDrop">drop</button>
</div>
</body>

<script>

   var btnDrop= document.getElementById('btnDrop');
   btnDrop.onclick = function () {
       var image1 = document.getElementById('img1');
       var box=document.getElementById('box');
       box.appendChild(image1);

   }

  function allowDrop(ev){
       ev.preventDefault(); //组织默认行为
  }

    function drag(ev){
       ev.dataTransfer.setData("sourceId",ev.target.id); // 允许数据在不同的元素之间传递
   }

  function drop(ev){
       ev.preventDefault();
       var sourceId = ev.dataTransfer.getData("sourceId");

       ev.target.appendChild(document.getElementById(sourceId));

  }



</script>
</html>